<template>
  <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" :title="title" width="520" @close="close">
    <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="图片名称：" prop="pic_name">
        <el-input v-model="form.pic_name" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="分类：" prop="category_id">
        <el-select v-model="form.category_id" placeholder="请选择分类" style="flex-grow: 1">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.category_name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="素材：" prop="pic_url">
        <div class="file_pot">
          <el-upload ref="upload" accept="image/jpeg,image/gif,image/png" :action="action" :auto-upload="false" :class="[
    'upload-content',
    fileList.length == 0 ? 'upload_show' : 'upload_hide',
  ]" :file-list="fileList" :limit="limit" :list-type="picture" :multiple="true" :on-change="handleChange"
            :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove">
            <template #trigger v-if="fileList.length == 0">
              <vab-icon class="avatar-uploader-icon" icon="add-line" />
            </template>
            <el-dialog v-model="dialogVisible" append-to-body title="查看大图">
              <div class="upload-image">
                <el-image :src="dialogImageUrl" />
              </div>
            </el-dialog>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { doEdit, uploadFile } from '@/api/enterpriseWeChat/gallery'
export default defineComponent({
  name: 'TableEdit',
  emits: ['fetch-data'],
  setup(props, { emit }) {
    const $baseMessage = inject('$baseMessage')
    const state = reactive({
      formRef: null,
      treeRef: null,
      form: {
        id: '',
        pic_name: '',
        category_id: '',
        pic_url: '',
      },
      rules: {
        pic_name: [{ required: true, trigger: 'blur', message: '请输入图片名称' }],
        category_id: [{ required: true, trigger: 'blur', message: '请选择分类' }],
        pic_url: [{ required: true, trigger: 'blur', message: '请选择图片' }],
      },
      title: '',
      limit: 1,
      size: 5,
      picture: 'picture',
      action: '',
      dialogImageUrl: [],
      fileList: [],
      categoryList: [],
      dialogVisible: false,
      dialogFormVisible: false,
    })
    const handlePreview = (file) => {
      state.dialogImageUrl = file.url
      state.dialogVisible = true
    }
    const handleChange = (file) => {
      if (file.size > 1048576 * state.size) {
        $baseMessage('图片不能超过5MB', 'error', 'vab-hey-error-success')
        state.fileList = []
      } else {
        const formData = new FormData()
        formData.append('file', file.raw)
        uploadData(formData)
      }
    }
    const handleExceed = () => {
      $baseMessage('每次只能上传1张', 'error', 'vab-hey-error-success')
    }
    const handleRemove = () => {
      state.fileList = []
      state.form.pic_url = ''
      $baseMessage('移除成功', 'success', 'vab-hey-message-success')
    }
    const uploadData = async (file) => {
      state.fileList.push({ url: '', name: '查看详情' })
      const { code, message, data } = await uploadFile(file)
      console.log(data)
      if (code == 200) {
        state.form.pic_url = data.file_path
      } else {
        state.fileList = []
      }
      $baseMessage(message, 'success', 'vab-hey-message-success')
    }
    const showEdit = (categoryList, row) => {
      console.log(row)
      state.categoryList = categoryList
      if (!row) {
        state.title = '创建图片'
      } else {
        state.title = '编辑图片'
        state.form = Object.assign({}, row)
        state.fileList.push({
          url: row.pic_url,
          name: '查看详情',
        })
      }
      state.dialogFormVisible = true
    }
    const close = () => {
      state['formRef'].resetFields()
      state.form = {}
      state.fileList = []
      state.dialogFormVisible = false
    }
    const save = () => {
      state['formRef'].validate(async (valid) => {
        if (valid) {
          const { message } = await doEdit(state.form)
          $baseMessage(message, 'success', 'vab-hey-message-success')
          emit('fetch-data')
          close()
        }
      })
    }
    return {
      ...toRefs(state),
      showEdit,
      close,
      save,
      handleChange,
      handlePreview,
      handleExceed,
      handleRemove,
    }
  },
})
</script>

<style lang="scss" scoped></style>
